<template>
    <div class="right-modal-page" :class="{ hide: !show }" v-if="mounted">
        <div class="right-modal-page-border"></div>
        <div class="right-modal-page-rect right-modal-page-rect-1"></div>
        <div class="right-modal-page-rect right-modal-page-rect-2"></div>
        <div class="right-modal-page-rect right-modal-page-rect-3"></div>
        <div class="right-modal-page-content">
            <slot />
        </div>
        <div class="right-modal-page-close" @click="onClose">
            <i class="iconfont icon-close"></i>
        </div>
        <div class="right-modal-page-top-left-rect"></div>
        <div class="right-modal-page-bottom-right-rect"></div>
    </div>
</template>
<script setup>
const props = defineProps({
    show: {
        type: Boolean,
        default: () => false,
    },
    mounted: {
        type: Boolean,
        default: () => false,
    },
    top: {
        type: String,
        default: () => "80px",
    },
    right: {
        type: [String, Object],
        default: () => "24px",
    },
    left: {
        type: [String, Object],
        default: () => null,
    },
    bottom: {
        type: [String, Object],
        default: () => null,
    },
});

const emits = defineEmits(["close"]);

const onClose = () => {
    emits("close");
};
</script>
<style lang="less" scoped>
.right-modal-page {
    position: fixed;
    top: v-bind(top);
    right: v-bind(right);
    left: v-bind(left);
    bottom: v-bind(bottom);
    z-index: 1099;
    box-sizing: border-box;
    transform-origin: top right;
    animation: showModal 0.25s forwards;
    opacity: 0;
    transform: scale(0);
    filter: drop-shadow(0 0 2px var(--primary-color));
    &-content {
        min-width: 100px;
        min-height: 80px;
        clip-path: polygon(
            8px 100%,
            calc(100% - 8px) 100%,
            100% calc(100% - 8px),
            100% 34px,
            calc(100% - 12px) 22px,
            calc(100% - 64px) 22px,
            calc(100% - 76px) 0,
            8px 0,
            0 8px,
            0 calc(100% - 8px)
        );
        background: var(--bg-color-3);
    }
    &-border {
        position: absolute;
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
        clip-path: polygon(
            8px 100%,
            calc(100% - 8px) 100%,
            100% calc(100% - 8px),
            100% 34px,
            calc(100% - 12px) 22px,
            calc(100% - 64px) 22px,
            calc(100% - 76px) 0,
            8px 0,
            0 8px,
            0 calc(100% - 8px)
        );
        background: var(--primary-color);
    }
    &-rect {
        width: 6px;
        height: 15px;
        position: absolute;
        background: var(--primary-color);
        top: 0;
        right: 54px;
        transform: skew(30deg);
        &-2 {
            right: 42px;
        }
        &-3 {
            right: 30px;
        }
    }
    &.hide {
        animation-name: hideModal;
    }
    &-close {
        position: absolute;
        right: 2px;
        top: -4px;
        cursor: pointer;
        opacity: 0.75;
        transition: all 0.25s ease-in-out;
        &:hover {
            opacity: 1;
        }
    }
    &-top-left-rect,
    &-bottom-right-rect {
        position: absolute;
        width: 24px;
        height: 20px;
        background: var(--primary-color);
        opacity: .8;
        pointer-events: none;
        filter: drop-shadow(0 0 2px var(--primary-color));
        clip-path: polygon(
            3px 100%,
            3px calc(50% + 1.5px),
            50% 3px,
            100% 3px,
            100px 0,
            calc(50% - 1.5px) 0,
            0 50%,
            0 100%
        );
    }
    &-top-left-rect {
        top: -6px;
        left: -6px;
    }
    &-bottom-right-rect {
        bottom: -6px;
        right: -6px;
        transform: rotate(180deg);
    }
}

@keyframes showModal {
    0% {
        opacity: 0;
        transform: scale(0);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes hideModal {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0);
    }
}
</style>
